<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>HTML5 Mini Player</title>
	<meta name="description" content="HTML5 Music Player">
	<meta name="author" content="zation">
	<link rel="stylesheet" href="css/styleMini.css" type="text/css">
	<script src="js/NPlayerMini.js" type="text/javascript"></script>
	<script src="js/jscolor/jscolor.js" type="text/javascript"></script>
	<script>
		document.addEventListener("DOMContentLoaded", function() {
			var nPlayer = new NPlayer({
				containerId:'nPlayer_mini',
				width:300,
				height:80,
				backgroundColor:'#EEE'
			});
			var color = new jscolor.color(document.getElementById('color'),{
				pickerClosable:false,
				pickerOnfocus:false,
				hash:true,
				adjust:false,
				styleElement:nPlayer.playBox,
				pickerPosition:'right'
				});
			
			color.showPicker();
			document.getElementById('color').addEventListener('change', function(e){
				document.getElementById('colorValue').innerHTML=this.value;
			}, false)
		}, false);
		
	</script>
	<style>
		body{
			
		}
		#nPlayer_mini{
			height:200px;
			width:400px;
			border:1px solid black;
		}
	</style>
</head>
<body>
    <div id="nPlayer_mini"></div>
    <p>
	开源项目地址：<a target="_blank" href="http://code.google.com/p/html5player">http://code.google.com/p/html5player</a>
    </p>
    <p>
	下载：<a href="./NPlayerMini.zip">点此</a>
    </p>
    <p>
	安装方式：
	<ul>
		<li>
			1. 加入JS文件引用：&lt;script src=&quot;js/NPlayerMini.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
		</li>
		<li>
			2. 加入CSS文件引用：&lt;link rel=&quot;stylesheet&quot; href=&quot;css/styleMini.css&quot; type=&quot;text/css&quot;&gt;
		</li>
		<li>
			3. 直接复制以下代码或在下面的颜色选择器中选择背景颜色后再复制代码：<br/>
			var nPlayer = new NPlayer({<br/>
				&nbsp;&nbsp;containerId:'nPlayer_mini', //容器的ID（播放器会自动在容器中居中）<br/>
				&nbsp;&nbsp;width:300, //播放器的宽度<br/>
				&nbsp;&nbsp;height:80, //播放器的高度<br/>
				&nbsp;&nbsp;backgroundColor:'<span id="colorValue">#EEE</span>' //播放器的背景颜色<br/>
			});
		</li>
	</ul>
    </p>
    
    请在这里选择播放器背景颜色：<input id="color" type="text" value="#EEE">
</body>